<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="crumb">
                <ul>
                    <li class="f_left">当前位置：</li>
                    <li class="f_left">
                        <router-link to="/index">首页></router-link>
                    </li>
                    <li class="f_left">体检预约</li>
                </ul>
            </div>
            <div class="tiPrev">
                <div class="ti_prev_box text_center">
                    <h3 class="ti_prev_title">体检预约</h3>
                    <h4 class="ti_prev_explain">请预约您的体检信息</h4>
                    <h4 class="ti_prev_explain" v-if="showSubmit" style="color: #0066CC;">体检预约成功</h4>
                    <el-form class="apply_form ti_prev_form" label-width="110px">
                        <el-form-item class="text_left" label="医院名称：">
                            <el-select v-model="form.hospitalId" placeholder="请选择体检医院" @change="chooseHos" :disabled="showSubmit">
                                <el-option v-for="item in options" :key="item.id" :label="item.hospitalName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="text_left" label="医院地址：">
                            <p class="apply_p" style="width: 500px;">{{form.hospitalAddress}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="选择日期：">
                            <!-- <el-select v-model="form.appointmentDate" placeholder="请选择体检日期" style="width:269px;"
                                :disabled="showSubmit">
                                <el-option v-for="(item,index) in dateSelects" :key="index" :value="item">{{item}}
                                </el-option>
                            </el-select> -->
                            <el-date-picker class="input-border-null" prefix-icon="el-icon-date" v-model="form.appointmentDate"
                                type="date" placeholder="请选择体检日期" :picker-options="pickerOptions0" :disabled="showSubmit"></el-date-picker>
                        </el-form-item>
                        <el-form-item class="text_left" label="选择时间：">
                            <el-select v-model="form.appointmentTimeType1" style="width:269px;" :disabled="showSubmit">
                                <el-option value="8:30-10:30">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item class="text_left wenxinTip" label="">
                            <p class="attentionP">
                                温馨提示：<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;1、体检时间需要提前两天预约，体检当天要求空腹。<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;2、务必按照预约时间准时参加体检，需自带身份证。<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;3、体检费146元/人，参加体检时向医院自行缴纳即可。<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;4、延期时须提交近三个月内的体检合格证明，请学员合理安排体检时间。
                            </p>
                            <p style="color: #ff0000;line-height: 24px;">特别提醒：证书持有人应当于期满前3个月内申请办理延期手续，逾期证书作废。</p>
                        </el-form-item>
                        <el-form-item class="apply_btns ti_prev_btns">
                            <router-link class="apply_return" to="/user/apply_info">返回</router-link>
                            <a v-if="!showSubmit" @click="onSubmit">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    export default {
        name: "ti_prev",
        data() {
            return {
                showSubmit: false,
                options: [],
                form: {
                    hospitalAddress: "",
                    applyId: 0,
                    appointmentDate: '', //日期
                    hospitalId: '', //医院id
                    appointmentTimeType1: "8:30-10:30", //时间段
                    appointmentTimeType: "1",
                },
                // dateSelects: [],
                pickerOptions0: {
                    disabledDate(time) {
                        return new Date(time.getTime()).DateAdd("d",-2) < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
                    }
                }
            }
        },
        mounted: function() {
            this.form.applyId = this.$route.params.applyId;
            this.getHospitals();
            this.getPrevTi();
        },
        methods: {
            getPrevTi: function() {
                var that = this;
                this.common.post(this.api.getMyAppointment, {
                    applyId: this.form.applyId
                }, function(res) {
                    if (res.resultMap.hospitalId != null || res.resultMap.hospitalId != undefined) {
                        that.showSubmit = true;
                        that.options.forEach(function(v, i) {
                            if (parseInt(v.id) == parseInt(res.resultMap.hospitalId)) {
                                that.form.hospitalAddress = v.hospitalAddress;
                                that.form.hospitalId = res.resultMap.hospitalId;
                                that.form.appointmentTimeType1 = "8:30-10:30";
                                that.form.appointmentDate = new Date(res.resultMap.appointmentDate)
                                    .Format("yyyy-MM-dd");
                            }
                        })
                    }else{
                        that.showSubmit = false;
                    }
                });
            },
            getHospitals: function() {
                var that = this;
                this.common.post(this.api.getHospitals, {}, function(res) {
                    that.options = res.resultMap;
                    // var arr = [];
                    // arr = res.resultMap[0].physicalDates.split(",");
                    // that.dateSelects = arr;
                });
            },
            chooseHos: function(item) {
                var that = this;
                this.options.forEach(function(v, i) {
                    if (v.id == item) {
                        that.form.hospitalAddress = v.hospitalAddress;
                    }
                });
            },
            onSubmit: function() {
                var that = this;
                if (this.form.hospitalId == "") {
                    this.$message.error("请选择体检医院!");
                    return;
                }
                if (this.form.appointmentDate == "") {
                    this.$message.error("请选择体检日期!");
                    return;
                }

                if (this.form.appointmentTimeType == "") {
                    this.$message.error("请选择体检时间段!");
                    return;
                }
                this.form.appointmentDate=this.form.appointmentDate.Format("YYYY-MM-DD");
                this.common.post(this.api.saveAppointmentNew, this.form, function(res) {
                    that.$message.success("预约成功！");
                    that.reload();
                }, function(res) {
                    that.$message.error(res.resultMsg);
                });
            },
            reload: function() {
                window.location.reload();
            }
        },
        components: {
            headerFooter
        }
    }
</script>

<style>
    .face_no_open .face_no_img {
        margin: 200px 0 50px 0;
    }

    .face_no_open .footer {
        display: none;
    }

    .ti_prev_btns {
        margin-top: 80px;
    }

    .ti_prev_form .el-input--suffix .el-input__inner {
        padding-right: 30px;
        padding-right: 0;
    }

    .wenxinTip .el-form-item__content {
        margin-left: 10px !important;
        width: 600px;
    }

    .wenxinTip .attentionP {
        line-height: 26px;
        font-size: 14px;
    }
</style>
